/**
 * 基础菜单 用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>转接管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="数据筛选：">
        <el-input size="small" v-model="formInline.woNumber" placeholder="输入工单编号"></el-input>
      </el-form-item>
      <el-form-item label="">
         <el-date-picker
            v-model="formInline.trueAtime"
            @change="dateConversion"
            align="right"
            type="date"
            placeholder="选择申请日期"
            :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
       <el-form-item label="转接状态：">
            <el-select v-model="formInline.woTransStatus" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="reset()">重置</el-button>
      </el-form-item>
    </el-form>
    <!--工单转接列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="woNumber" label="工单编号" width="100">
      </el-table-column>
      <el-table-column sortable prop="woProTitle" label="问题标题" width="200">
      </el-table-column>
      <el-table-column sortable prop="userName" label="提交人" width="100">
      </el-table-column>
      <el-table-column sortable prop="categoryName" label="问题分类" width="200">
      </el-table-column>
      <el-table-column sortable prop="woSubmitTime" label="提交时间" width="100">
      </el-table-column>
      <el-table-column sortable prop="trueAtime" label="申请转单时间" width="200">
      </el-table-column>
      <el-table-column sortable prop="woTransStatus" label="转接状态" width="100">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">转接</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 转接弹框 -->
    <el-dialog :title="editForm.woProTitle" :visible.sync="editFormVisible" width="50%" @click="closeDialog">
      <!-- 工单详情 -->
      <el-descriptions class="margin-top" title="工单信息" :column="3" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-order"></i>
            工单编号
          </template>
        {{editForm.woNumber}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            提交人
          </template>
           {{editForm.commitName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-menu"></i>
            问题类别
          </template>
          {{editForm.categoryName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-date"></i>
            提交时间
          </template>
            {{editForm.woSubmitTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-flag"></i>
            工单状态
          </template>
          <el-tag size="small">{{editForm.woStatus}}</el-tag>
        </el-descriptions-item>
  </el-descriptions>
 
    <el-descriptions class="margin-top"  :column="2" :size="size" border>
       <!-- 问题描述 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-data"></i>
            问题描述
          </template>
          {{editForm.woProCont}}
        </el-descriptions-item>
        <!-- 图片列表 -->
         <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture"></i>
            截图
          </template>
         <div class="demo-image__preview">
            <el-image 
              style="width: 100px; height: 100px"
              :src="url" 
              :preview-src-list="editForm.imgList">
            </el-image>
          </div>
        </el-descriptions-item>
  </el-descriptions><br>

  <!-- 申请转接信息 -->
  <el-descriptions class="margin-top" title="申请转接信息" :column="3" :size="size" border>
        
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user-solid"></i>
            申请人
          </template>
           {{editForm.appName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-chat-line-round"></i>
            申请理由
          </template>
          {{editForm.appRea}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-date"></i>
            申请时间
          </template>
        {{editForm.trueAtime}}
        </el-descriptions-item>
      <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-flag"></i>
            转接状态
          </template>
          <el-tag size="small">{{editForm.woTransStatus}}</el-tag>
        </el-descriptions-item>
  </el-descriptions><br>
  <!-- 转接选择 -->
 <el-descriptions class="margin-top" title="转接" :column="1" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-thumb"></i>
            请选择要转接到的问题类别
          </template>
          <el-select v-model="editForm.queCatId" filterable placeholder="请选择">
                  <el-option
                    v-for="item in editForm.selectoptions"
                    :key="item.categoryId"
                    :label="item.categoryName"
                    :value="item.categoryId">
                  </el-option>
          </el-select>
        </el-descriptions-item>
  </el-descriptions>
  

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">转接</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {

       options: [{
          value: '0',
          label: '未申请'
        }, {
          value: '1',
          label: '申请转单'
        }, {
          value: '2',
          label: '已转单'
        }],
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制转接弹出框的显示与隐藏
      editForm: {
        woId:'',
        woNumber:'',
        commitName:'',
        categoryName:'',
        woProTitle:'',
        woProCont:'',
        woSubmitTime:'',
        woStatus:'',
        woTransStatus:'',
        appName:'',
        appRea:'',
        trueAtime:'',
        imgList:[],
        //问题分类列表
        selectoptions:[],
        queCatId:''
        },
      formInline: {
        page: 1,
        limit: 8,
        //工单编号
        woNumber:"",
        //申请时间
        trueAtime:"",
        //转接状态
        woTransStatus:""
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //工单转接列表数据
//       account: "admin"
      // id: 1
      // password: "a66abb5684c45962d887564f08346e8d"
      // roleId: 1
      // roles: "1"
      // status: "y"
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 8,
        total: 10
      },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },  
        url: ''
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      this.loading = false
      
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
     //请求所有工单转接列表
      this.$axios.post('/api/depTrans/findTransToMeWoAll/'+this.pageparm.currentPage+"/"+this.pageparm.pageSize,
      this.formInline).then(res=>{
       
        this.loading = false
        if(res.data.code == 200){
          //  console.log(res);
            this.listData = res.data.data.list;

            this.$message({
              type: 'info',
              message: res.data.msg
            })
        }else{
           this.$message({
              type: 'error',
              message: res.data.msg
            })
        }
      }).catch();
        //请求所有问题分类列表
      this.$axios.get('/api/depTrans/findAllQueCategory')
      .then(res=>{
        this.loading = false
        if(res.data.code == 200){
            this.editForm.selectoptions = res.data.data;
            this.$message({
              type: 'info',
              message: res.data.msg
            })
        }else{
           this.$message({
              type: 'error',
              message: res.data.msg
            })
        }
      }).catch();
    },
    // 分页插件事件
    callFather(parm) {
      //子传父 当前页和每页大小
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示转接弹出框
    handleEdit: function(index, row) {
      console.log("转接：",index,row);
      this.editFormVisible = true
      //把一行的所有值传入弹出框的data
        this.editForm.woId = row.woId
        this.editForm.woNumber = row.woNumber
        this.editForm.commitName = row.commitName
        this.editForm.categoryName = row.categoryName
        this.editForm.woProTitle = row.woProTitle
        this.editForm.woProCont = row.woProCont
        this.editForm.woSubmitTime = row.woSubmitTime
        this.editForm.woStatus = row.woStatus
        this.editForm.woTransStatus = row.woTransStatus
        this.editForm.appName = row.appName
        this.editForm.appRea = row.appRea
        this.editForm.trueAtime = row.trueAtime
        let arr = row.imgs
        //截图封面
        this.url=arr[0].imgUrl
        //截图集合
        for(let i = 0,len=arr.length; i < len; i++) {
         this.editForm.imgList.push(arr[i].imgUrl)
        }
    },
    // 转接更新方法
    submitForm(editData) {

            this.$axios.get("/api/depTrans/updateOneDepTrans/"+this.editForm.woId+"/"+this.editForm.queCatId).then(res=>{
                if(res.data.code == 200){
                  this.getdata(this.formInline)
                  this.$message({
                    type: 'success',
                     message: res.data.msg
                  })
                  this.editFormVisible = false
                }else{
                   this.$message({
                   type: 'info',
                   message: res.data.msg
                })
                 this.editFormVisible = false
                }
            }).catch();
        
    },
    // 关闭转接弹出框
    closeDialog() {
      this.editFormVisible = false
    },
    //绑定了模糊查询中日期选择器 用来转换日期后返回给后台处理
    dateConversion(){
          if(this.formInline.trueAtime === null){
            console.log("我TM")
          }else{
            this.formInline.trueAtime=this.formInline.trueAtime.toLocaleDateString()
          }
      },
      //搜索重置
      reset(){
        this.formInline.woNumber=''
        this.formInline.trueAtime=''
        this.formInline.woTransStatus=''
      }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 